<template>
	<view :data-theme="theme">
		<view class="particulars">
			<view class="particulars_card_bottom">
				<view style="display: flex;justify-content: space-between;">
					<h1>退款详情</h1>
					<span style="padding: 10rpx;border-radius: 8rpx;"
						:color="bgColor">{{refundStatus[refundOrderMessage.refundStatus]}}</span>
				</view>
				<view class="order">
					<view class="order_message">退款金额:</view>
					<view>￥{{ refundOrderMessage.refundPrice }}</view>
				</view>
				<view class="order">
					<view class="order_message">退款数量:</view>
					<view>{{ refundOrderMessage.applyRefundNum }}</view>
				</view>
				<view class="order">
					<view class="order_message">扣除赠送积分:</view>
					<view>{{ refundOrderMessage.refundGainIntegral }}</view>
				</view>
				<view class="order">
					<view class="order_message">退回积分:</view>
					<view>{{ refundOrderMessage.refundUseIntegral }}</view>
				</view>
				<view class="order">
					<view class="order_message">退一级返佣:</view>
					<view>￥{{ refundOrderMessage.refundFirstBrokerageFee }}</view>
				</view>
				<view class="order">
					<view class="order_message">退二级返佣:</view>
					<view>￥{{ refundOrderMessage.refundSecondBrokerageFee }}</view>
				</view>
				<view class="order">
					<view class="order_message">退款时间:</view>
					<view>{{ refundOrderMessage.createTime }}</view>
				</view>
				<view class="order">
					<view class="order_message">退款单号:</view>
					<view>{{ refundOrderMessage.refundOrderNo }}</view>
				</view>
				<view class="order">
					<view class="order_message">退款原因:</view>
					<view>{{ refundOrderMessage.refundReasonWap ? refundOrderMessage.refundReasonWap : '无'}}</view>
				</view>
				<view class="order">
					<view class="order_message">退款说明:</view>
					<view>
						{{ refundOrderMessage.refundReasonWapExplain ? refundOrderMessage.refundReasonWapExplain : '无'}}
					</view>
				</view>
				<view class="order">
					<view class="order_message">商家退款备注:</view>
					<view>{{ refundOrderMessage.merRemark }}</view>
				</view>
				<view class="order1" style="display: flex;flex-direction: column;">
					<view class="order_message1" style="opacity: 0.5;margin-top: 15px;margin-bottom: 30rpx;">退款商品:
					</view>
					<view style="display: flex;flex-flow: row;">
						<u--image :showLoading="true" :src="refundOrderMessage.image" width="80px"
							height="80px"></u--image>
						<view style="display: flex;flex-flow: column;">
							<view style="font-weight: bold;margin-left: 20rpx;">
								{{refundOrderMessage.productName}}
							</view>
							<view style="margin-left: 20rpx;margin-top: 20rpx;">
								<view>商品售价： <span>￥{{ refundOrderMessage.price }}</span> </view>
								<view>商品规格： <span>{{ refundOrderMessage.sku }}</span> </view>
								<view>数量：
									<span>{{ refundOrderMessage.payNum }}{{refundOrderMessage.specUnit ? (JSON.parse(refundOrderMessage.specUnit).sellUnit || '') : ''}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="particulars_card_top">
				<view class="particulars_header">
					<view class="header_left">
						<view style="opacity: 0.5; margin-right: 15px; font-size: 15px;">订单号</view>
						<view style="font-size: 14px;">{{ orderMessage.orderNo }}</view>
					</view>
					<view class="header_right">{{ orderMessage.status | orderStatusFilter }}</view>
				</view>
				<view class="particulars_body">
					<view class="particulars_body_top" v-for="order in orderDetailList" :key="order.id">
						<!-- 渲染的图片 -->
						<u--image :showLoading="true" :src="order.image" width="80px" height="80px"
							class="top_left"></u--image>
						<view class="top_right">
							<view class="top_right_weight">商品名称：{{ order.productName }}</view>
							<view>商品售价： <span>￥{{ order.price }}</span> </view>
							<view>商品规格： <span>{{ order.sku }}</span> </view>
							<view>数量： <span>{{ order.payNum }}{{order.specUnit ? (JSON.parse(order.specUnit).sellUnit || '') : ''}}</span></view>
						</view>
					</view>
					<view class="particulars_body_bottom">
						<view class="bottom_list">
							<view style="display:flex;">
								<view style="margin-right:3px;">商品总价</view>
							</view>
							<view>￥{{ orderMessage.totalPrice }}</view>
						</view>
						<view class="bottom_list">
							<view style="display:flex;">
								<view style="margin-right:3px;">商户优惠金额</view>
							</view>
							<view>-￥{{ orderMessage.couponPrice }}</view>
						</view>

					</view>
				</view>
				<view class="particulars_footer">
					<view class="particulars_foote_top">
						共{{ orderMessage.totalNum }}件商品，实际支付<span>￥{{ orderMessage.payPrice }}</span></view>
					<view class="particulars_footer_bottom">实际支付仅供参考，实际支付以订单实际完成情况为准</view>
				</view>
			</view>

			<view class="particulars_card_bottom">
				<h1>订单详情</h1>
				<h2>用户信息</h2>
				<view class="order">
					<view class="order_message">用户昵称:</view>
					<view>{{ orderMessage.nikeName }}</view>
				</view>
				<view class="order">
					<view class="order_message">用户电话:</view>
					<view>{{ orderMessage.phone }}</view>
				</view>
				<h2>收货人信息</h2>
				<view class="order">
					<view class="order_message">收货人:</view>
					<view>{{ orderMessage.realName }}</view>
				</view>
				<view class="order">
					<view class="order_message">收货人电话:</view>
					<view>{{ orderMessage.userPhone }}</view>
				</view>
				<view class="order">
					<view class="order_message">收货地址:</view>
					<view>{{ orderMessage.userAddress }}</view>
				</view>
				<h2>订单信息</h2>
				<view class="order">
					<view class="order_message">订单号:</view>
					<view>{{orderMessage.orderNo}}</view>
				</view>
				<view class="order">
					<view class="order_message">支付状态:</view>
					<view>{{orderMessage.paid ? '已支付' : '未支付'}}</view>
				</view>
				<view class="order">
					<view class="order_message">支付邮费:</view>
					<view>￥{{ orderMessage.payPostage }}</view>
				</view>
				<view class="order">
					<view class="order_message">创建时间:</view>
					<view>{{ orderMessage.createTime }}</view>
				</view>
				<view class="order">
					<view class="order_message">创建时间:</view>
					<view>{{ orderMessage.createTime }}</view>
				</view>
				<view class="order">
					<view class="order_message">配送方式:</view>
					<view>{{ deliveryType[orderMessage.deliveryType] }}</view>
				</view>
				<view class="order">
					<view class="order_message">支付时间:</view>
					<view>{{ orderMessage.payTime }}</view>
				</view>

				<view class="order">
					<view class="order_message">支付方式:</view>
					<view>{{ payType[orderMessage.payType] }}</view>
				</view>
				<view class="order">
					<view class="order_message">赠送积分:</view>
					<view>{{ orderMessage.gainIntegral }}</view>
				</view>
				<view class="order">
					<view class="order_message">用户备注:</view>
					<view>{{ orderMessage.userRemark ? orderMessage.merchantRemark :'无'  }}</view>
				</view>
				<view class="order">
					<view class="order_message">商家备注:</view>
					<view>{{ orderMessage.merchantRemark  ? orderMessage.merchantRemark:'无' }}</view>
				</view>

			</view>


		</view>
	</view>
	</view>
</template>

<script>
	import {
		orderStatusFilter
	} from "../utils/filter.js";
	import {
		getOrderDetailApi,
		getRefundOrderDetailApi
	} from '@/api/orderMarket.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				orderNo: '', //退款单号
				refundOrderNo: '',
				refundOrderMessage: {},
				orderMessage: {}, //数据详情
				orderDetailList: [], //数据列表
				payType: {
					yue: '余额'
				},
				deliveryType: {
					express: '邮寄'
				},
				refundStatus: {
					0: '待审核',
					1: '未通过',
					2: '退款中',
					3: '已退款',
				},
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let data = JSON.parse(options.data);
			this.refundOrderNo = data.refundOrderNo;
			this.orderNo = data.orderNo;
			this.getOrderDetail();
			this.getRefundOrderDetail();
		},
		// 过滤器
		filters: {
			orderStatusFilter // 订单状态
		},
		methods: {
			// 获取详情数据
			getOrderDetail() {
				getOrderDetailApi(this.orderNo).then((res) => {
					if (res.code == 200) {
						this.orderMessage = res.data,
							this.orderDetailList = res.data.orderDetailList
					}
				})
			},
			getRefundOrderDetail() {
				getRefundOrderDetailApi(this.refundOrderNo).then((res) => {
					if (res.code == 200) {
						this.refundOrderMessage = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.particulars {
		overflow: hidden;

		.particulars_card_top {
			background-color: #fff;
			margin: 20px;
			padding: 20px;
			border-radius: 10px;

			.particulars_header {
				display: flex;
				justify-content: space-between;
				font-size: 20px;
				padding-bottom: 20px;

				.header_left {
					display: flex;
					align-items: center;
				}

				.header_right {
					color: #4583d6;
					font-size: 12px;
				}
			}

			.particulars_body {
				.particulars_body_top {
					display: flex;
					padding: 10px 0;
					border-bottom: 1px solid #eee;

					.top_left {
						width: 70px;
						height: 70px;
						margin-right: 15px;
					}

					.top_right {
						font-size: 15px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						view {
							margin-bottom: 8px;
						}

						.top_right_weight {
							font-weight: bold;
						}
					}

				}

				.particulars_body_bottom {
					padding-bottom: 20px;
					border-bottom: 1px solid #eee;

					.bottom_list {
						padding: 7px 0;
						display: flex;
						justify-content: space-between;
					}
				}

			}

			.particulars_footer {
				text-align: right;
				padding: 10px;

				.particulars_foote_top {
					font-size: 16px;
					margin-bottom: 10px;
					font-weight: bold;
				}

				.particulars_footer_bottom {
					font-size: 12px;
					opacity: 0.5;
				}
			}
		}

		.particulars_card_bottom {
			background-color: #fff;
			padding: 20px;
			margin: 20px;
			border-radius: 10px;

			h1 {
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 20px;
			}

			h2 {
				font-weight: bold;
				margin: 20px 0;
			}

			.order {
				display: flex;
				margin-top: 10px;

				.order_message {
					margin-right: 10px;
					opacity: 0.5;
				}

				.order_message_right {
					margin-bottom: 10px;
				}
			}
		}
	}
</style>